﻿<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">


    
    <Style TargetType="DataGrid" x:Key="ExpandableGridStyle">
        <Style.Triggers>
            <DataTrigger Binding="{Binding IsSelected}" Value="True">
                <DataTrigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="LayoutTransform.ScaleY">
                                <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="1">
                                    <EasingDoubleKeyFrame.EasingFunction>
                                        <CubicEase EasingMode="EaseInOut" />
                                    </EasingDoubleKeyFrame.EasingFunction>
                                </EasingDoubleKeyFrame>
                            </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                    </BeginStoryboard>
                </DataTrigger.EnterActions>
                <DataTrigger.ExitActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="LayoutTransform.ScaleY">
                                <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0">
                                    <EasingDoubleKeyFrame.EasingFunction>
                                        <CubicEase EasingMode="EaseInOut" />
                                    </EasingDoubleKeyFrame.EasingFunction>
                                </EasingDoubleKeyFrame>
                            </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                    </BeginStoryboard>
                </DataTrigger.ExitActions>
            </DataTrigger>
        </Style.Triggers>
    </Style>
    
    <!-- This data template controls the details for the main grid. It displays two secondary grids with a splitter -->
    <DataTemplate x:Key="JobCountsGridDetails">
        <Border Background="BlanchedAlmond" BorderBrush="DarkRed" BorderThickness="3" CornerRadius="5" Height="300">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition MinHeight="40" />
                    <RowDefinition Height="10" />
                    <RowDefinition MinHeight="40" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="auto" />
                    <ColumnDefinition Width="auto" />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
                
                <TextBlock VerticalAlignment="Top" Text="Jobs for " Margin="0 10" />
                <TextBlock Grid.Column="1" VerticalAlignment="Top" Text="{Binding Tag}" Margin="0 10" />
                <DataGrid  Grid.Column="2" Name="grdJobDescrs" AutoGenerateColumns="False" 
                           ItemsSource="{Binding Path=JobList}" 
                           IsReadOnly="True" Background="LightGoldenrodYellow" 
                           VerticalScrollBarVisibility="Auto" Margin="0 5 5 0" >
                    <DataGrid.Columns>
                        <DataGridTextColumn Header="Tag" Binding="{Binding Tag}" />
                        <DataGridTextColumn Header="Age" Binding="{Binding AgeString}" />
                        <DataGridTextColumn Header="City" Binding="{Binding City}" />
                        <DataGridTextColumn Header="Province" Binding="{Binding Province}" />
                        <DataGridTextColumn Header="Country" Binding="{Binding Country}" />
                        <DataGridCheckBoxColumn Header="Remote Allowed?" Binding="{Binding AllowsRemote}" />
                    </DataGrid.Columns>
                </DataGrid>

                <GridSplitter Grid.Row="1" Grid.ColumnSpan="3" ResizeDirection="Rows" HorizontalAlignment="Stretch" 
                                                        Height="10" Cursor="SizeNS" >
                    <GridSplitter.Background>
                        <ImageBrush ImageSource="/CountJobTags;component/Images/Images10x1px.jpg" TileMode="Tile" />
                    </GridSplitter.Background>
                </GridSplitter>

                <TextBlock Grid.Row="2" Text="Related Skills:" VerticalAlignment="Top" />
                <DataGrid Grid.Row="2" Grid.Column="2" ItemsSource="{Binding FormattedRelatedJobs}" IsReadOnly="True" 
                                                    AutoGenerateColumns="False" Background="LemonChiffon" VerticalScrollBarVisibility="Auto" Margin="0 0 5 5" >
                    <DataGrid.Columns>
                        <DataGridTextColumn Header="Related Skill" Binding="{Binding RelatedSkill}" />
                        <DataGridTextColumn Header="% of Times Listed with Main Skill" Binding="{Binding Pct,StringFormat=P}" />
                        <DataGridTextColumn Header="# of Times Listed with Main Skill" Binding="{Binding Count}" />
                    </DataGrid.Columns>
                </DataGrid>

            </Grid>
        </Border>
    </DataTemplate>

    <!-- Causes the selected row to look different -->
    <Style TargetType="DataGridRow" x:Key="selectedRowStyle">
        <Style.Triggers>
            <Trigger Property="IsSelected" Value="True">
                <Setter Property="BorderBrush" Value="Blue" />
                <Setter Property="BorderThickness" Value="2" />
            </Trigger>
        </Style.Triggers>
    </Style>
</ResourceDictionary>